<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta Content-Type="application/json">
  <title>小金鱼系统配置</title>
</head>

<body>
  <h1>小金鱼系统配置</h1>
  <div id="wifi">
    <h5>WiFi:</h5>
    名称: <input type="text" id="ssid" value=""><br>
    密码: <input type="text" id="passwd" value=""><br>
  </div>
  <div id="http">
    <h5>Http:</h5>
    密钥: <input type="text" id="key" value=""><br>
  </div>
  <div id="gui">
    <h5>GUI:</h5>
    文字: <input type="text" id="remind" value=""><br>
  </div>
  <hr>
  <button type="button" id="submit" onclick="submit()">确定</button>
</body>
<script>
  window.onload = function() {
    console.log("window load");
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "sgf", true);
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4) {
        var obj = JSON.parse(xmlhttp.responseText);
        document.getElementById("ssid").value = obj.wifi.ssid;
        document.getElementById("passwd").value = obj.wifi.passwd;
        document.getElementById("key").value = obj.http.key;
        document.getElementById("remind").value = obj.gui.remind;
      }
    }
    xmlhttp.send();
  }
  function submit() {
    var myjs = {
      wifi: {
        ssid: document.getElementById("ssid").value,
        passwd: document.getElementById("passwd").value
      },
      http: {
        key: document.getElementById("key").value,
      },
      gui: {
        remind: document.getElementById("remind").value
      }
    };
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "sgf_post", true);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onload = () => console.log(xhr.responseText);
    var str = JSON.stringify(myjs);
    alert(str);
    xhr.send(str);
  }
</script>

</html>